import React, { useState, useEffect } from 'react';
import styles from './index.module.scss';

import { Button, Table, Pagination, Input, Select, Switch } from '@alifd/next';

import { useParams } from 'ice';

// 获取api
import { getDeviceInfo } from '../../services/deviceInfo.js';

const PAGE_SIZE = 10;

const InterfacesTab = (props) => {
    const ID = useParams().id;

    let [ currentPage, onCurrentPage ] = useState(1),
        [ dataSource, onDataSource ] = useState([]);
    
    let onDevice = props.onDevice;

    useEffect(()=>{
      getDeviceInfo(ID).then(result => {
          console.log('result', result);
          if(result.code == 200) {
              onDataSource(result.msg[0].interfaces)
          }
      })
    },[]);

    let d = dataSource.slice((currentPage-1)*PAGE_SIZE,currentPage*PAGE_SIZE)
    // 分页
    const onPageChange = currentPage => {
      onCurrentPage(currentPage)
    };

    const handleChange = ( v, e, k, i ) => {
      if(k=='IPv4/IPv4Mask') {
        let arr = v.split('/');
        dataSource[i]['IPv4'] = arr[0];
        dataSource[i]['IPv4Mask'] = arr[1];
      } else {
        dataSource[i][k] = v;
      }
        
      
      
      onDataSource([...dataSource]);

      if(k == 'dhcp') {
        onDevice(a=> {
          return {
            ...a, 
            interfaces: dataSource
          }
        })
      } else if (k == 'isAssigned') {
        onDevice(a=> {
          return {
            ...a, 
            interfaces: dataSource
          }
        })
      }
    };

    const handleBlur = ( e ) => {
        onDevice(a=> {
          return {
            ...a, 
            interfaces: dataSource
          }
        })
    };

    // table的列配置
    const tableConfig = [
      {
        title: 'Name',
        dataIndex: 'name',
        sortable: true
      },
      {
        title: 'Type',
        dataIndex: 'type',
        sortable: true
      },
      {
        title: 'Assigned',
        dataIndex: 'isAssigned',
        sortable: true,
        content: (value, index, record) => {
          return (
            <Switch checkedChildren="Yes" checked={dataSource[index]['isAssigned']} onChange={(v,e)=>handleChange(v,e,'isAssigned',index)} unCheckedChildren="No" />
          )
        }
      },
      {
        title: 'MAC',
        dataIndex: 'MAC',
        sortable: true
      },
      {
        title: 'DHCP/Static',
        dataIndex: 'dhcp',
        sortable: true,
        content: (value, index, record) => {
          return (
            <>
              {
                value == 'yes' ? (
                  <Select value={dataSource[index]['dhcp']} onChange={(v,e)=>handleChange(v,e,'dhcp',index)}>
                    <Select.Option label="DHCP" value="yes"></Select.Option>
                    <Select.Option label="Static" value="no"></Select.Option>
                  </Select>
                ) : 'Static'
              }
            </>
          )
        }
      },
      {
        title: 'IPv4',
        dataIndex: 'IPv4',
        sortable: true,
        content: (value, index, record) => {
          return (
            <>
              {
                record.type == 'LAN' && record.isAssigned ? (
                  <Input value={`${dataSource[index]['IPv4']}/${dataSource[index]['IPv4Mask']}`} onChange={(v,e)=>handleChange(v,e,'IPv4/IPv4Mask',index)} onBlur={handleBlur}/>
                ) : `${dataSource[index]['IPv4']}/${dataSource[index]['IPv4Mask']}`
              }
            </>
          )
        }
      },
      {
        title: 'GW',
        dataIndex: 'gateway',
        sortable: true
      },
      {
        title: 'Metric',
        dataIndex: 'metric',
        sortable: true
      },
      {
        title: 'Public IP',
        dataIndex: 'PublicIP',
        sortable: false
      },
      {
        title: 'Path Labels',
        dataIndex: 'pathlabels',
        sortable: true
      },
      {
        title: 'Routing',
        dataIndex: 'routing',
        sortable: true
      },
    ];

    return (
        <>
        <div className={styles['interface-table']}>
            <Table
                type="primary"
                dataSource={d}
            >
            {
                tableConfig.map((item,i) => {
                return (
                    <Table.Column 
                      key={i} 
                      title={item.title} 
                      dataIndex={item.dataIndex} 
                      sortable={item.sortable}
                      cell={item.content}
                    />
                )
                })
            }
            </Table>
        </div>
        <div className={styles['interface-pagination']}>
            <Pagination 
              onChange={onPageChange}
              total={dataSource.length}
              pageSize={PAGE_SIZE}
              pageShowCount={5} 
            />
        </div>
      </>
    )
};

export default InterfacesTab;